<template>
  <!--概览-->
  <div class="base-container overviewManagement">
    <el-row gutter="10">
      <el-col :span="20">
        <el-row gutter="10">
          <el-col :span="12">
            <div class="energyConsumptionAnalysis">
              <p class="energyConsumptionAnalysisTitle">日分项能耗同比</p>
              <daily-itemized-energy-consumption ref="daily_itemized_energy_consumption"/>
            </div>
          </el-col>
          <el-col :span="12">

            <div class="energyConsumptionAnalysis">
              <p class="energyConsumptionAnalysisTitle">月分项能耗同比</p>
              <el-select
                  v-model="projectId"
                  placeholder="Select"
                  @change="monthsqueryAction"
                  size="small"
                  style="width: 140px;float: right;top:-40px;left:-15px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <monthly-itemized-energy-consumption ref="monthly_itemized_energy_consumption"/>
            </div>
          </el-col>
        </el-row>
        <el-row gutter="10">
          <el-col :span="10">
            <div class="energyConsumptionAnalysis">
              <p class="energyConsumptionAnalysisTitle">用能饼图</p>
              <el-select
                  v-model="timeType"
                  placeholder="Select"
                  @change="piequeryAction"
                  size="small"
                  style="width: 140px;float: right;top:-40px;left:-15px">
                <el-option
                    v-for="item in timeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <use-energy-pie-charts ref="use_energy_pie_charts"/>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="energyConsumptionAnalysis">
              <p class="energyConsumptionAnalysisTitle">过去一个月分项用能趋势</p>
              <energy-use-trend ref="energy_use_trend"/>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <type-component @setType="setType" :layout="'portrait'" class="typeComponent" :type="type"/>

      </el-col>
    </el-row>

  </div>


</template>

<script>
import TypeComponent from "@/components/TypeComponent.vue";
import DailyItemizedEnergyConsumption from "@/views/subitem/components/DailyItemizedEnergyConsumption.vue";
import MonthlyItemizedEnergyConsumption from "@/views/subitem/components/MonthlyItemizedEnergyConsumption.vue";
import UseEnergyPieCharts from "@/views/subitem/components/UseEnergyPieCharts.vue";
import EnergyUseTrend from "@/views/subitem/components/EnergyUseTrend.vue";

let component;
export default {
  name: "OverviewManagement",
  components: {
    EnergyUseTrend,
    UseEnergyPieCharts, MonthlyItemizedEnergyConsumption, DailyItemizedEnergyConsumption, TypeComponent
  },
  data() {
    return {
      type: 'water',
      projectId: 0,
      options: [],
      timeOptions: [{
        label: '今日',
        value: 1
      }, {
        label: '昨日',
        value: 2
      }, {
        label: '本月',
        value: 3
      }, {
        label: '上月',
        value: 4
      }],
      timeType: 3

    }
  },
  methods: {
    setType(value) {
      this.type = value
      component.queryAction();

    },
    queryAction() {
      component.todaysqueryAction();
      component.monthsqueryAction(component.projectId);
      //用能饼图
      component.piequeryAction();
      //过去一月趋势
      component.trendqueryAction();
    },
    async piequeryAction() {
      //数据查询
      let response = await component.$asyncPost("dataAnalysis", {
        actionType: 'pieProjectAnalysis',
        type: component.type,
        timeType: component.timeType
      });
      if (response.success) {
        component.$refs.use_energy_pie_charts.setData(response.dataList);
      } else {
      }
    },
    async trendqueryAction() {
      //数据查询
      let response = await component.$asyncPost("dataAnalysis", {
        actionType: 'trendProjectAnalysis',
        type: component.type
      });
      if (response.success) {
        component.$refs.energy_use_trend.setData(response.chartObj);
      } else {
      }
    },
    async todaysqueryAction() {
      //数据查询
      let response = await component.$asyncPost("dataAnalysis", {
        actionType: 'todayProjectAnalysis',
        type: component.type
      });
      if (response.success) {
        component.$refs.daily_itemized_energy_consumption.setData(response.dataList, response.xAxis);
      } else {
      }
    },
    async monthsqueryAction(projectId) {
      //数据查询
      let response = await component.$asyncPost("dataAnalysis", {
        actionType: 'monthProjectAnalysis',
        type: component.type,
        projectId: projectId
      }, false);
      if (response.success) {
        component.$refs.monthly_itemized_energy_consumption.setData(response.chartObj);
        if (response.downDropList) component.options = response.downDropList;

      } else {
      }
    },

  },
  mounted() {
    component = this;
    component.queryAction();
  }
}
</script>

<style scoped lang="scss">
.overviewManagement {
  .typeComponent {
    /* flex: initial;
     display: flex;
     justify-content: center;
     align-items: center;*/
  }

  .energyConsumptionAnalysis {
    /*    height: 400px;
        width: 100%;
        border: 1px solid honeydew;
        margin-bottom: 30px;
        margin-right: 30px;*/
    height: 370px;
    background: #151617;
    margin-right: 15px;
    margin-bottom: 30px;
    border-radius: 14px;
  }

  .energyConsumptionAnalysisTitle {
    color: #e0e9f2;
    padding: 20px 0px 20px 20px;
  }
}


</style>